﻿<common:LayoutAwarePage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Studio77.GuessTheWordsWin8.Pages"
    xmlns:common="using:Studio77.GuessTheWordsWin8.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Views="using:Studio77.GuessTheWordsWin8.Views"
    xmlns:JiuYouWin8Ad="using:JiuYouWin8Ad"
    x:Name="pageRoot"
    x:Class="Studio77.GuessTheWordsWin8.Pages.GamePage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d">

    <common:LayoutAwarePage.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
        <Style x:Key="ButtonStyleBack" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFA6A6A6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>1</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="#FF002FFF" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                            <ColorAnimation Duration="0" To="#FFF3FF00" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="border" BorderBrush="Black" Background="#FF001EA2"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="48"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="ButtonStyleLamp" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFA6A6A6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="0.7" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0.8" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="image" d:IsOptimized="True"/>
                                            <ColorAnimation Duration="0" To="#FFF8FF69" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>1</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="#FF001EA2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="border" BorderBrush="Black" Background="#FFF3FF00">
                                <Image x:Name="image" Width="64" VerticalAlignment="Center" Stretch="UniformToFill" Source="ms-appx:///Images/Tips.png" Height="64" HorizontalAlignment="Center"/>
                            </Border>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ButtonStyleClearStage" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FFA6A6A6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>1</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="#FFFF6464" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                            <ColorAnimation Duration="0" To="#FFF3FF00" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="border" BorderBrush="Black" Background="#FF787878"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="48"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
    </common:LayoutAwarePage.Resources>
    <Page.TopAppBar>
        <AppBar x:Name="globalAppbar" Padding="10,0,10,0" Background="#E5EA0000">
            <Grid Background="#02000000">
                <Button x:Name="btnClearStageData" Click="btnClearStageData_Click" Style="{StaticResource ButtonStyleClearStage}" Margin="0,10,20,10" HorizontalAlignment="Right" Width="288" Height="64" FontSize="32">清空关卡内容</Button>
                <Button x:Name="btnGuide" Click="btnGuide_Click" Style="{StaticResource ButtonStyleClearStage}" Margin="20,10,0,10" HorizontalAlignment="Left" Width="288" Height="64" FontSize="32" Content="查看游戏教程"/>
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Viewbox>
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid Style="{StaticResource LayoutRootStyle}" Background="{StaticResource NormalBackground}" Height="768" Width="1366">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="681*"/>
                <ColumnDefinition Width="685*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="107"/>
            </Grid.RowDefinitions>

            <!-- Back button and page title -->
            <Grid x:Name="gridUnuse" Margin="0,0,0,521" Grid.ColumnSpan="2" Visibility="Collapsed">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
                <TextBlock x:Name="pageTitle" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Text="关卡-1 完成: 10/26" HorizontalAlignment="Left"/>
            </Grid>

            <Rectangle Fill="#FF9C0000" Height="23" VerticalAlignment="Top" StrokeThickness="0" Grid.ColumnSpan="2"/>
            <Rectangle Fill="#FF9C0000" StrokeThickness="0" Margin="0" VerticalAlignment="Bottom" Height="10" Grid.ColumnSpan="2" Grid.Row="1"/>
            <Border x:Name="border" VerticalAlignment="Center" BorderBrush="White" BorderThickness="2" Background="Black" Height="618" Width="620" HorizontalAlignment="Center" Margin="0,23,0,0">
                <Canvas x:Name="cvsBlocks" HorizontalAlignment="Center" Height="610" VerticalAlignment="Center" Width="610"/>
            </Border>
            <Grid Grid.ColumnSpan="2" Margin="0,0,0,10" VerticalAlignment="Bottom" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="319*"/>
                    <ColumnDefinition Width="728"/>
                    <ColumnDefinition Width="112*"/>
                    <ColumnDefinition Width="207*"/>
                </Grid.ColumnDefinitions>
                <Border BorderBrush="Black" Height="90" Padding="0" Margin="0" Background="#FFD6D6D6" Grid.Column="1">
                    <Grid>
                        <Viewbox HorizontalAlignment="Center" Height="80" VerticalAlignment="Center" Width="316" >
                            <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                                <Image Margin="0,4,0,0" Source="ms-appx:///Images/title_feng.png" Stretch="Fill" Width="116" Height="116" HorizontalAlignment="Left"/>
                                <Image Margin="108,2,0,0" Source="ms-appx:///Images/title_kuang.png" Stretch="Fill" Width="118" Height="118" HorizontalAlignment="Left"/>
                                <Image Margin="223,0,0,0" Source="ms-appx:///Images/title_tian.png" Stretch="Fill" Width="118" Height="120" HorizontalAlignment="Left"/>
                                <Image Margin="334,2,0,0" Source="ms-appx:///Images/title_zi.png" Stretch="Fill" Width="118" Height="118" HorizontalAlignment="Left"/>

                            </Grid>
                        </Viewbox>
                        <Image x:Name="imgMokaAd" Source="ms-appx:///Images/banner728.jpg" Stretch="Fill" Tapped="MokaAd_Tapped"/>
                        <!--<JiuYouWin8Ad:JiuYouAdControl x:Name="JiuYouSDK" Margin="0,0,0,0" AdvertisementFormat="Seven" DeveloperID="6ce509934afde4b5"/>-->
                    </Grid>
                </Border>
                <Border BorderBrush="Black" Background="#FFFF9700">
                    <TextBlock x:Name="txtStageInfo" HorizontalAlignment="Center" TextWrapping="Wrap" Text="关卡-777" VerticalAlignment="Center" Foreground="White" FontSize="48" FontWeight="Bold" Margin="0,5,0,0"/>
                </Border>
                <Button x:Name="btnGoback" Content="返回" HorizontalAlignment="Stretch" Style="{StaticResource ButtonStyleBack}" VerticalAlignment="Stretch" Click="btnGoback_Click" Grid.Column="3"/>
                <Button x:Name="btnLamp" Content="60" HorizontalAlignment="Stretch" Style="{StaticResource ButtonStyleLamp}" VerticalAlignment="Stretch" Click="btnLamp_Click" Foreground="Black" FontSize="48" Grid.Column="2"/>
            </Grid>
            <ScrollViewer Grid.Column="1" Margin="0,40,0,0" VerticalAlignment="Top" Height="319" ZoomMode="Disabled" VerticalScrollMode="Auto">
                <StackPanel VerticalAlignment="Center" Margin="20,0">
                    <TextBlock x:Name="txtDefaultTip" HorizontalAlignment="Center" TextWrapping="Wrap" Text="请点击左边的游戏矩阵中的白色空格" TextAlignment="Center" FontSize="32"/>
                    <TextBlock x:Name="txtHorizonTip" HorizontalAlignment="Left" TextWrapping="Wrap" Text="横：提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示" FontSize="32" Foreground="#FFF95555" Margin="0,10"/>
                    <TextBlock x:Name="txtVerticalTip" HorizontalAlignment="Left" TextWrapping="Wrap" Text="竖：提示提示提示提示提示提示提示提示提示提示提示提示" FontSize="32" Foreground="#FF8AFF7E" Margin="0,10"/>
                </StackPanel>

            </ScrollViewer>
            <Border Grid.Column="1" Margin="0,0,10,8" VerticalAlignment="Bottom" BorderBrush="#FF303030" BorderThickness="1" Background="#FF474747" Height="265" Width="675">
                <Views:VisualKeyboard Height="Auto" Width="Auto"/>
            </Border>
            <TextBlock Grid.Column="1" HorizontalAlignment="Left" Margin="0,359,0,0" TextWrapping="Wrap" Text="提示：输入对应汉字的拼音首字母完成答题" VerticalAlignment="Top" FontSize="21.333" Foreground="White"/>
            <TextBlock Grid.Column="1" HorizontalAlignment="Right" Margin="0,357,20,0" TextWrapping="Wrap" Text="支持实体键盘哦" VerticalAlignment="Top" FontSize="21.333" Foreground="#FFEDFF78"/>

        </Grid>
    </Viewbox>
</common:LayoutAwarePage>
